<template>
  <el-card style="max-width: 100%">
    <template #header>
      <div class="card-header" style="display: flex; justify-content: space-between; align-items: center">
        <span>农田列表</span>
        <div>
          <el-input
            v-model="searchText"
            placeholder="请输入农田名称、位置或作物"
            style="width: 300px; margin-right: 10px"
            clearable
            @clear="handleSearchClear"
            @keyup.enter="handleSearch"
          />
          <el-button type="primary" @click="handleSearch">搜索</el-button>
        </div>
      </div>
    </template>
    <!-- 农田列表表格 -->
    <el-table :data="filteredData.slice((currentPage-1)*pageSize,pageSize*currentPage)" border stripe style="width: 100%">
      <el-table-column label="编号" width="80">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span style="margin-left: 10px">{{ scope.$index + 1 }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="农田名称" width="180">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span style="margin-left: 10px">{{ scope.row.name }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="位置" width="180">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span style="margin-left: 10px">{{ scope.row.location }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="作物" width="120">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span style="margin-left: 10px">{{ scope.row.crop }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="状态" width="120">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <el-tag :type="scope.row.status === '需施肥' ? 'warning' : 'success'">
              {{ scope.row.status }}
            </el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="更新时间" width="180">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span style="margin-left: 10px">{{ scope.row.updateTime }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="农田照片" width="180">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <img
              :src="'http://localhost:3000'+scope.row.imageUrl.substring(7)"
              alt="农田图片"
              style="width: 100px; height: 80px; object-fit: cover"
            />
             <!-- <img
              :src="scope.row.imageUrl"
              alt="农田图片"
              style="width: 100px; height: 80px; object-fit: cover"
            /> -->
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.row.id)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页效果 -->
    <el-pagination
      background
      layout="prev, pager, next"
      :total="filteredData.length"
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
    />
  </el-card>
</template>

<script setup>
import { ElMessage } from "element-plus";
import axios from "axios";
import { ref, onMounted, computed } from "vue";

const currentPage = ref(1); //当前页默认为1
const pageSize = ref(5); //页面有5条数据
const courseData = ref([]);
const searchText = ref(""); // 搜索文本
// 计算属性：过滤后的数据
const filteredData = computed(() => {
  if (!searchText.value) {
    return courseData.value;
  }
  const search = searchText.value.toLowerCase();
  return courseData.value.filter(item => 
    item.name.toLowerCase().includes(search) ||
    item.location.toLowerCase().includes(search) ||
    item.crop.toLowerCase().includes(search)
  );
});

// 搜索处理
const handleSearch = () => {
  currentPage.value = 1; // 搜索后重置到第一页
};

// 清除搜索
const handleSearchClear = () => {
  searchText.value = "";
  currentPage.value = 1;
};


//获取农田
const getCourseData = () => {
  axios.get("http://localhost:3000/farms").then((res) => {
    // console.log(res);
    // res.data.forEach(element => {
    //   courseData.value.push({
    //     name: element.name,
    //     image: element.image,
    //     location: element.location,
    //     crop: element.crop,
    //     status: element.status,
    //     imgurl: window.URL.createObjectURL(element.imgurl.url),
    //   });
    // });
    courseData.value = res.data;
  });
};


//删除农田
const handleDelete = (id) => {
  console.log(id);
  axios
    .delete("http://localhost:3000/farms/" + id)
    .then((res) => {
      if (res.statusText == "OK") {
        ElMessage({
          message: "删除成功！",
          type: "success",
        });
        getCourseData();
      } else {
        ElMessage.error("删除失败，请联系管理员");
      }
    })
    .catch((err) => {
      console.log(err);
    });
};

onMounted(() => {
  getCourseData();
});
</script>

<style>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>